import React, { useState } from 'react';
import { Button, message, Modal } from 'antd';
import { RestOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { batchRestore } from '../service';

const BatchRestore = (props) => {
  const { ids, onSuccess } = props;
  const [uploading, setUploading] = useState(false);

  // 处理
  const handle = async () => {
    const key = 'batch_restore';
    setUploading(true);
    message.loading({ content: ' 批量恢复中...', key });
    const result = await batchRestore({ ids });
    setUploading(false);
    if (result.success) {
      message.success({ content: '批量恢复成功', key });
      await onSuccess();
      return;
    }
    message.error({ content: result.message, key });
  };

  return (
    <>
      <Button
        type="primary"
        loading={uploading}
        onClick={() => {
          Modal.confirm({
            title: '系统提示',
            icon: <ExclamationCircleOutlined />,
            content: '确定要批量恢复所选的数据吗？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            async onOk() {
              await handle();
            },
          });
        }}
      >
        <RestOutlined /> 批量恢复
      </Button>
    </>
  );
};

export default BatchRestore;
